<template>
    <!-- <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
        open
      </el-button> -->

      <el-avatar shape="square" :size="100"  :src="props.modelValue" @click="drawer = true">
        <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
    </el-avatar>
      <el-drawer
        v-model="drawer"
        title="系统图片存储库"
        direction="ttb"
        size="60%"
      >
        <span>Hi, 我的图库</span>
      

    <el-upload  v-model:file-list="fileList" list-type="picture-card" 
                :auto-upload="false" :on-change="onChage">
        <el-icon><Plus /></el-icon>

        <template #file="{ file }">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="getImgurl(file.url)"
              >
                <el-icon><zoom-in /></el-icon>
              </span>
            </span>
          </div>
        </template>
      </el-upload>
    </el-drawer>

</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { UploadApi } from '@/api';
import { ElMessage } from 'element-plus'
const drawer = ref(false)
//const imgurl=ref("")
const fileList = ref([
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
])
//使用base64图片上传
const onChage = (uploadFile: any, uploadFiles: any) => { 
   // console.log("uploadFile===", uploadFiles);
    let name = uploadFile.name
    console.log("name==",name);
    let file = uploadFile.raw
    let reader = new FileReader()
     
    reader.readAsDataURL(file)
    //使用load加载base64信息
    reader.onload = () => { 
        //打印base
       console.log(reader.result);
        //回调上传的接口
        CallUploadApi(name, reader.result)
    }
}
const getImgurl = (imageUrl:any ) => { 
   // console.log("imageUrl==", imageUrl);
    // imgurl.value = imageUrl //头像赋值
    emit('update:modelValue',imageUrl)
    drawer.value=false
}


const CallUploadApi = (name:any,base64:any) => { 
  UploadApi.upload.call({ name: name, base64: base64 }).then((res: any) => { 
    if (res != 0) {
      ElMessage({
        message: '恭喜你上传成功',
        type: 'success',
        plain: true,
      })
      getImageList()
    } else { 
       ElMessage({
        message: '上传失败',
        type: 'error',
        plain: true,
      })
    }
    })
}
// 图库列表
const getImageList = () => { 
  UploadApi.imglist.call().then((res:any) => { 
    //console.log(res);
    fileList.value=res
  })
}
onMounted(() => { 
  getImageList()
})
//定义传递的默认类型 vue原则上单向数据流 父 -子 
const props = defineProps({
  modelValue: {
    type: String,
    default:''
  }
})

//告诉父类 我要 拿数据
const emit=defineEmits(['update:modelValue'])

</script>
<style scoped>


</style>